import type { PromiseFn } from '@/apis/schema/all'
import { Modal, type ModalConfig } from '@arco-design/web-vue'
import { isFunction } from 'lodash-es'
import IconDanger from '~icons/icons/danger'
import IconInfo from '~icons/icons/info'
import warning from '~icons/icons/warning'
const _CloudModal = () => {
  const basicConfig = (): ModalConfig => {
    return {
      title: '操作确认',
      content: '请确认操作',
      width: 480,
      okText: '确定',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      simple: false,
      modalClass: 'basic-dialog'
    }
  }
  //关闭弹窗
  function closeModals() {
    const modals = document.querySelectorAll('.arco-overlay-modal')
    modals.forEach((modal) => {
      modal.remove()
    })
  }
  function confirm(
    config: ModalConfig,
    request?: PromiseFn,
    onCancel?: () => void
  ) {
    closeModals()
    const conf = { ...basicConfig(), ...config }
    return Modal.error({
      ...conf,
      title: () => renderTitle(conf, 'confirm'),
      content: () => renderContent(conf),
      onBeforeOk: onBeforeOk(request),
      onCancel: onCancel,
      modalClass: `${basicConfig().modalClass} is-normal`
    })
  }

  function error(
    config: ModalConfig,
    request?: PromiseFn,
    onCancel?: () => void
  ) {
    closeModals()
    const conf = { ...basicConfig(), ...config }
    return Modal.error({
      ...conf,
      title: () => renderTitle(conf, 'error'),
      content: () => renderContent(conf),
      onBeforeOk: onBeforeOk(request),
      onCancel: onCancel,
      modalClass: `${basicConfig().modalClass} is-danger`
    })
  }
  function warn(
    config: ModalConfig,
    request?: PromiseFn,
    onCancel?: () => void
  ) {
    closeModals()
    const conf = { ...basicConfig(), ...config }
    return Modal.error({
      ...conf,
      title: () => renderTitle(conf, 'warning'),
      content: () => renderContent(conf),
      onBeforeOk: onBeforeOk(request),
      onCancel: onCancel,
      modalClass: `${basicConfig().modalClass} is-normal`
    })
  }
  function normal(config: ModalConfig, request?: PromiseFn) {
    closeModals()
    const conf = { ...basicConfig(), ...config }
    return Modal.error({
      ...conf,
      content: () => renderContent(conf),
      onBeforeOk: onBeforeOk(request),
      modalClass: `${basicConfig().modalClass} is-normal`
    })
  }

  function onBeforeOk(request?: PromiseFn) {
    return async () => {
      try {
        await request?.()
        return true
      } catch (error) {
        console.error(error)
        return false
      }
    }
  }
  const renderTitle = (
    config: ModalConfig,
    status: 'confirm' | 'error' | 'warning'
  ) => {
    return h('div', { class: 'cloud-model__title' }, [
      icon(status),
      isFunction(config.title) ? config?.title?.() : config?.title
    ])
  }
  const renderContent = (config: ModalConfig) => {
    return h('div', { class: 'cloud-model__content' }, [
      // icon,
      isFunction(config.content) ? config?.content?.() : config?.content
    ])
  }

  const icon = (status: 'confirm' | 'error' | 'warning') => {
    const map: Record<string, any> = {
      confirm: h(IconInfo),
      error: h(IconDanger),
      warning: h(warning)
    }
    return map[status]
  }

  return { confirm, error, normal, warn }
}

export const CloudModal = _CloudModal()
